<template>
   <view class="nav-list">
      <view class="nav-item" v-for="(item, i) in navList" :key="i" @click="navClickHandler(item)">
         <image :src="item.image_src" class="nav-img"></image>
      </view>
   </view>
</template>

<script>
   export default {
      data() {
         return {
            // 1. 分类导航的数据列表
            navList: [],

         };
      },
      created() {
         // 2. 在 onLoad 中调用获取数据的方法
         this.getNavList()

      },
      methods: {
         async getNavList() {
            
            const { data: res } = await uni.$http.get('/api/public/v1/home/catitems')
            console.log("dawdawdawd")
            if (res.meta.status !== 200) {
               return uni.$showMsg()
            }
               
            this.navList = res.message
         },
         // nav-item 项被点击时候的事件处理函数
         navClickHandler(item) {
            // 判断点击的是哪个 nav
            if (item.name === '分类') {
               uni.switchTab({
                  url: '/pages/cate/cate'
               })
            }
         }

      }
   };
</script>

<style scoped lang="scss">
   .nav-list {
      display: flex;
      justify-content: space-around;
      margin: 15px 0;
      .nav-img {
         width: 128rpx;
         height: 140rpx;
      }
   }

</style>